<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webToBridge</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
    <script type="text/javascript"
            src="http://static.robotwebtools.org/EventEmitter2/current/eventemitter2.min.js"></script>
    <script type="text/javascript" src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
</head>
<body>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<h1>webToBridge</h1>
<script type="text/javascript" charset="utf-8">
    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({
        title: {
            text: '系统监控走势图'
        },
        tooltip: {},
        legend: {
            data: ['cpu']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: 'cpu',
            type: 'line',
            data: []
        }]
    });

    var time = ["", "", "", "", "", "", "", "", "", ""],
        cpu = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]


    //准备好统一的 callback 函数
    var update_mychart = function (res) {
        //res是json格式的response对象

        // 隐藏加载动画
        myChart.hideLoading();

        // 准备数据
        time.push(res["time"]);
        cpu.push(parseFloat(res["linear"]["x"]));
        console.log(cpu)
        if (time.length >= 10) {
            time.shift();
            cpu.shift();
        }

        // 填入数据
        myChart.setOption({
            xAxis: {
                data: time
            },
            series: [{
                name: 'cpu', // 根据名字对应到相应的系列
                data: cpu
            }]
        });

    };

    // 首次显示加载动画
    myChart.showLoading();

    var socket;

    $(document).ready(function () {
        //要写namespace:/channel_A
        socket = io.connect('ws://127.0.0.1:8000/channel_A');
        // socket.emit('operation', {'topic': '/cmd_vel'})
        //测试1连接,测试2:Publishing
        socket.on('connect', function () {
            console.log('connect');
            socket.emit('operation', [cmdVel, twist])
            console.log('operation');
            socket.emit('operationListener', [listener])
            console.log('operationListener');
        })


        // Publishing a Topic
        // ------------------
        // Connect to ROS.
        var ros = new ROSLIB.Ros();

        var cmdVel = new ROSLIB.Topic({
            ros: ros,
            name: '/cmd_vel',
            messageType: 'geometry_msgs/Twist'
        });

        var twist = new ROSLIB.Message({
            linear: {
                x: 0.1,
                y: 0.2,
                z: 0.3
            },
            angular: {
                x: -0.1,
                y: -0.2,
                z: -0.3
            }
        });

        // Subscribing to a Topic
        // ----------------------

        var listener = new ROSLIB.Topic({
            ros: ros,
            name: '/listener',
            messageType: 'geometry_msgs/Twist'
        });

        //测试3:Subscribing FlaskServer/send_to_front返回的数据
        socket.on('front', function (data) {
            console.log('front');
            console.log(data);
            // flaskServer端dict ，发送给 js，数据类型是object
            console.log(typeof data);
            console.log(data["linear"]["x"])
            console.log(data["angular"])
            //time 用于 Echarts 横坐标
            console.log(data["time"])
            update_mychart(data);
        })
    })


</script>
</body>
</html>